﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">EventToCommand</title>
  <keywords>
    <keyword translate="true">Commands</keyword>
    <keyword translate="true">Events</keyword>
    <keyword translate="true">MVVM</keyword>
    <keyword translate="true">Triggers</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">EventToCommand</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Almost every respectable MVVM framework supports the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Interactivity_EventToCommand" styleclass="Normal" translate="true">EventToCommand</link><text styleclass="Normal" translate="true"> trigger. It is a trigger that allows a an event to be turned into a command. This way, you never have to manually add event handlers, search for the view model in the code-behind and then call the right command.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The usage is really simple, but requires the </text><text styleclass="Normal" style="font-style:italic;" translate="true">System.Windows.Interactivity.dll</text><text styleclass="Normal" translate="true"> reference (ships with Catel). The example below shows how to add a trigger for the double click of a </text><text styleclass="Normal" style="font-style:italic;" translate="true">ListBox</text><text styleclass="Normal" translate="true">.</text></para>
    <list id="1" type="ol" listtype="decimal" formatstring="&#37;&#48;&#58;&#115;&#46;" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" translate="true">Add the following XML namespaces:</text></li>
    </list>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">xmlns:i=&quot;clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity&quot;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">xmlns:catel=&quot;http://catel.codeplex.com&quot;</text></para>
    <list id="1" type="ol" listtype="decimal" formatstring="&#37;&#48;&#58;&#115;&#46;" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" translate="true">Use the following definition. This example will invoke the </text><text styleclass="Normal" style="font-style:italic;" translate="true">Edit</text><text styleclass="Normal" translate="true"> command of the view model):</text></li>
    </list>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> ItemsSource=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding PersonCollection}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; SelectedItem=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding SelectedPerson}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Triggers</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:EventTrigger</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> EventName=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">MouseDoubleClick</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:EventToCommand</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Command=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding Edit}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; DisableAssociatedObjectOnCannotExecute=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">False</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:EventTrigger</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Triggers</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox.ItemTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">DataTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">StackPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Orientation=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Horizontal</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding FirstName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding MiddleName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding LastName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">StackPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">DataTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox.ItemTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">If you want to use parameters (in the case of this example, get the </text><text styleclass="Normal" style="font-style:italic;" translate="true">MouseDoubleClick</text><text styleclass="Normal" translate="true"> event args, set </text><link displaytype="text" defaultstyle="true" type="topiclink" href="P_Catel_Windows_Interactivity_EventToCommand_PassEventArgsToCommand" styleclass="Normal" translate="true">PassEventArgsToCommand</link><text styleclass="Normal" translate="true"> to </text><text styleclass="Normal" style="font-style:italic;" translate="true">true</text><text styleclass="Normal" translate="true">:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Commands:EventToCommand</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Command=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding Edit}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; DisableAssociatedObjectOnCannotExecute=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">False</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; PassEventArgsToCommand=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">True</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Then, in the view model, you can even make the command &quot;type-safe&quot;:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// Gets the Edit command.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Command&lt;MouseEventArgs&gt; Edit { get; </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">private</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> set; }</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">// TODO: Move code below to constructor</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">Edit = </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Command(OnEditExecute, OnEditCanExecute);</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">// TODO: Move code above to constructor</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// Method to check whether the Edit command can be executed.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">private</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">bool</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> OnEditCanExecute(MouseEventArgs e)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">return</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">true</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">}</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// Method to invoke when the Edit command is executed.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">private</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">void</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> OnEditExecute(MouseEventArgs e)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">// TODO: Handle command logic here</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">}</text></para>
  </body>
</topic>
